<script>
import aimAttrs from "./components/aimAttrs";
import myComponent from "./components/myComponent";
import key from "keymaster";

const fs = window.require("fs");

export default {
  name: "App",
  data() {
    return {
      tree: this.$store.state.page.tree, // 编辑区数据树
      colorDom: this.$store.state.colorDom, // 遮蔽层
      showAttrsList: false, // 属性
      showcomponetList: true, // 组件
      colBoxDialog: false, // 多列布局
      colBoxDialogRadio: "1", // 多列布局数量
      colBoxWidth: [48, 48], // 多列布局宽度
      pageName: "index", // 页面名称
      pageDialog: false, // 页面布局
      newPageName: "", // 新页面名称
      seniorBoxDialog: false, // 高级布局
      imgList: [], // 保存页面所用图片的blob地址和本地地址
    };
  },
  methods: {
    // 清理多余图片
    delete_uselessImage() {
      let list = [];
      let filesList;

      // 清洗数据
      for (const key in this.imgList) {
        if (Object.hasOwnProperty.call(this.imgList, key)) {
          list.push(this.imgList[key].src);
        }
      }

      try {
        // 获取文件夹下面的全部图片路径
        filesList = fs.readdirSync(this.__filePath + "/developPageImage");
        // 删除多余图片
        filesList.forEach((item) => {
          let imgPath = this.__filePath + "/developPageImage/" + item;
          // 如果页面图片引用列表中没有--则删除
          if (!list.includes(imgPath)) {
            fs.unlinkSync(imgPath);
          }
        });
      } catch (error) {
        console.error(error);
      }
    },
    // 控制组件列表显示/隐藏
    change_showcomponetList() {
      this.showcomponetList = !this.showcomponetList;
      // 如果这时候属性列表显示，则隐藏它
      this.showAttrsList && (this.showAttrsList = false);
    },
    // 控制属性列表显示/隐藏
    change_showAttrsList() {
      this.showAttrsList = !this.showAttrsList;
      // 如果这时候组件列表显示，则隐藏它
      this.showcomponetList && (this.showcomponetList = false);
    },
    // 撤销操作
    cancel_deedStack() {
      // 判断存储栈为不为空
      if (this.$store.state.domStackNum == -1) return;
      this.$store.commit("deedStackChange", {
        that: this,
        type: "cancel",
      });
    },
    // 恢复操作
    restore_deedStack() {
      // 判断存储栈控制下标是否在栈顶--即已经没有东西可以恢复了
      if (
        this.$store.state.domStackNum ==
        this.$store.state.domStack.length - 1
      )
        return;
      this.$store.commit("deedStackChange", {
        that: this,
        type: "restore",
      });
    },
  },
  created() {
    // 加载页面数据
    this.$store.commit("loadPageData", { that: this });

    // 快捷键绑定
    // 控制组件列表显示/隐藏
    key("shift + q", this.change_showcomponetList);
    // 控制属性列表显示/隐藏
    key("shift + w", this.change_showAttrsList);
    // 显示页面布局
    key("shift + e", () => {
      this.pageDialog = !this.pageDialog;
    });
    // 打包
    key("shift + a", () => {
      this.$store.commit("packPage", {
        treeData: JSON.stringify(this.tree),
        that: this,
      });
    });
    // 保存
    key("shift + s", () => {
      this.$store.commit("storeData", { that: this });
    });
    // 进入捕捉模式
    key("shift + d", () => {
      this.showAttrsList = false;
      this.showcomponetList = false;
      this.$store.commit("changeJudgeColorDom", { that: this });
    });
    // 撤销操作
    key("shift + z", this.cancel_deedStack);
    // 恢复操作
    key("shift + y", this.restore_deedStack);
  },
  mounted() {},
  beforeDestroy() {
    this.delete_uselessImage();
  },
  render(h) {
    let that = this;
    return (
      <div>
        {/*菜单 */}
        <div class="menu">
          <a-button
            size="large"
            on={{
              click: this.change_showcomponetList,
            }}
          >
            <a-icon type="appstore" />
            组件
          </a-button>
          <a-button
            size="large"
            on={{
              click: this.change_showAttrsList,
            }}
          >
            <a-icon type="tool" />
            样式
          </a-button>
          <a-button
            size="large"
            on={{
              click: () => {
                this.pageDialog = true;
              },
            }}
          >
            <a-icon type="cluster" />
            结构
          </a-button>
          <a-button
            size="large"
            on={{
              click: () => {
                this.$store.commit("packPage", {
                  treeData: JSON.stringify(this.tree),
                  that,
                });
              },
            }}
          >
            <a-icon type="setting" />
            打包
          </a-button>
          <a-button
            size="large"
            on={{
              click: () => {
                this.$store.commit("storeData", { that });
              },
            }}
          >
            <a-icon type="inbox" />
            保存
          </a-button>
          <a-button
            size="large"
            disabled={this.$store.state.domStackNum == -1}
            on={{
              click: this.cancel_deedStack,
            }}
          >
            <a-icon type="rollback" /> 撤销
          </a-button>
          <a-button
            size="large"
            disabled={
              this.$store.state.domStackNum ==
              this.$store.state.domStack.length - 1
            }
            on={{
              click: this.restore_deedStack,
            }}
          >
            <a-icon type="retweet" />
            恢复
          </a-button>
        </div>

        {/*组件 */}
        <myComponent
          class="float component"
          fa_this={that}
          style={{
            minWidth: "300px",
            display: this.showcomponetList ? "block" : "none",
          }}
        />

        {/*网页编辑区*/}
        <div
          class="app produce"
          on={{
            dragover: (e) => {
              e.preventDefault();
            },
            dragenter: (e) => {
              this.$store.commit("store_dragenter", { e, that });
            },
            dragleave: (e) => {
              this.$store.commit("store_dragleave", { e, that });
            },
            drop: (e) => {
              this.$store.commit("store_ondrop", { e, that });
              this.$store.commit("store_dragleave", { e, that });
            },
            dragstart: (e) => {
              this.$store.commit("store_ondragstart", { e, that });
            },
            mouseover: (e) => {
              if (this.$store.state.judgeColorDom) {
                this.$store.commit("mouseoverColorChange", { e, that });
              }
              e.stopImmediatePropagation();
            },
            click: (e) => {
              if (this.$store.state.judgeColorDom) {
                this.$store.commit("checkDomAttrs", { e, that });
                this.$store.commit("changeJudgeColorDom", { e, that });
              }
              e.stopImmediatePropagation();
            },
          }}
          style={{
            width: "1224px",
            margin: "0 auto",
            border: "1px solid #ccc",
          }}
          data-type="app"
        >
          {this.tree[this.pageName].length != 0
            ? this.$explain(this, h, this.tree[this.pageName])
            : null}
        </div>

        {/*样式 */}
        <aimAttrs
          style={{
            minWidth: "300px",
            display: this.showAttrsList ? "block" : "none",
          }}
          showAttrsList={this.showAttrsList}
          fa_this={that}
          on={{
            changeShowAttrsList: (jud) => (this.showAttrsList = jud),
          }}
          class="float"
        />

        {/*遮蔽层 */}
        {this.$store.state.judgeColorDom &&
          this.$store.state.colorDomStyle.top && (
            <div
              class="colorDom"
              style={{
                top: this.$store.state.colorDomStyle.top,
                left: this.$store.state.colorDomStyle.left,
                borderWidth: this.$store.state.colorDomStyle.margin,
              }}
            >
              <div
                style={{
                  margin: this.$store.state.colorDomStyle.border,
                  borderWidth: this.$store.state.colorDomStyle.padding,
                  width: this.$store.state.colorDomStyle.width,
                  height: this.$store.state.colorDomStyle.height,
                }}
              ></div>
            </div>
          )}

        {/* 多列容器选择 */}
        <el-dialog visible={this.colBoxDialog} width="40%" show-close={false}>
          <span>
            <el-radio-group
              value={this.colBoxDialogRadio}
              on={{
                input: (e) => {
                  this.colBoxDialogRadio = e;
                  if (e == "1") {
                    this.colBoxWidth = [48, 48];
                  } else {
                    this.colBoxWidth = [32, 32, 32];
                  }
                },
              }}
              style={{ width: "100%", textAlign: "center" }}
            >
              <el-radio-button label="1">两列</el-radio-button>
              <el-radio-button label="2">三列</el-radio-button>
            </el-radio-group>
            <div class="colBoxWidth">
              <div>
                <span>第一列宽度</span>
                <el-input-number
                  value={this.colBoxWidth[0]}
                  on={{
                    change: (e) => {
                      this.$set(this.colBoxWidth, 0, e);
                    },
                  }}
                  min={10}
                  max={
                    this.colBoxDialogRadio == "2"
                      ? 96 - this.colBoxWidth[1] - this.colBoxWidth[2]
                      : 96 - this.colBoxWidth[1]
                  }
                  controls-position="right"
                ></el-input-number>
              </div>
              <div>
                <span>第二列宽度</span>
                <el-input-number
                  value={this.colBoxWidth[1]}
                  min={10}
                  max={
                    this.colBoxDialogRadio == "2"
                      ? 96 - this.colBoxWidth[0] - this.colBoxWidth[2]
                      : 96 - this.colBoxWidth[0]
                  }
                  controls-position="right"
                  on={{
                    change: (e) => {
                      this.$set(this.colBoxWidth, 1, e);
                    },
                  }}
                ></el-input-number>
              </div>
              {this.colBoxDialogRadio == "2" && (
                <div>
                  <span>第三列宽度</span>
                  <el-input-number
                    value={this.colBoxWidth[2]}
                    min={10}
                    max={96 - this.colBoxWidth[1] - this.colBoxWidth[0]}
                    controls-position="right"
                    on={{
                      change: (e) => {
                        this.$set(this.colBoxWidth, 2, e);
                      },
                    }}
                  ></el-input-number>
                </div>
              )}
            </div>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="warning"
              on={{
                click: () => {
                  this.colBoxDialog = false;
                },
              }}
            >
              取 消
            </el-button>
            <el-button
              type="primary"
              on={{
                click: () => {
                  this.$store.commit("controlColBoxDialog", { that });
                },
              }}
            >
              确 定
            </el-button>
          </span>
        </el-dialog>

        {/* 高级容器选择 */}
        <el-dialog
          visible={this.seniorBoxDialog}
          width="60%"
          show-close={false}
          title="请选择布局"
        >
          <div
            class="seniorBoxList"
            on={{
              click: (e) => {
                this.$store.commit("controlSeniorBoxDialog", { e, that });
              },
            }}
          >
            {this.$store.state.seniorBoxList.map((element, ind) => {
              return (
                <div class={ind.toString()}>
                  {this.$explain(this, h, element)}
                </div>
              );
            })}
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="warning"
              on={{
                click: () => {
                  this.seniorBoxDialog = false;
                },
              }}
            >
              关 闭
            </el-button>
          </span>
        </el-dialog>

        {/* 网站结构 */}
        <el-dialog
          visible={this.pageDialog}
          width="60%"
          class="webPage"
          title="下列为已有页面"
          show-close={false}
        >
          <div class="webPageList">
            {Object.keys(this.tree)
              .reverse()
              .map((key) => {
                return (
                  <div style={{ textAlign: "center", margin: "10px" }}>
                    <p>{key}</p>
                    <img
                      src={require("./assets/images/page.png")}
                      width="110"
                      height="90"
                    />
                    <div
                      style={{
                        display: "flex",
                        "justify-content": "space-between",
                      }}
                    >
                      {key == this.pageName ? null : (
                        <el-button
                          type="primary"
                          size="small"
                          on={{
                            click: () => {
                              if (this.pageName != key) this.pageName = key;
                              this.pageDialog = false;
                            },
                          }}
                        >
                          查看
                        </el-button>
                      )}
                      {key == "index" ? null : (
                        <el-popconfirm
                          title="确定删除组件？"
                          on={{
                            confirm: () => {
                              this.$store.commit("deletePage", {
                                that,
                                pageName: key,
                              });
                            },
                          }}
                        >
                          <el-button
                            slot="reference"
                            type="danger"
                            size="small"
                          >
                            删除
                          </el-button>
                        </el-popconfirm>
                      )}
                    </div>
                  </div>
                );
              })}
          </div>
          <span slot="footer" class="dialog-footer">
            <el-input
              value={this.newPageName}
              placeholder="请输入新页面名称"
              style={{ margin: "0 10px", "border-color": "#0084ff" }}
              on={{
                input: (e) => {
                  this.newPageName = e;
                },
              }}
            >
              <el-button
                slot="suffix"
                type="success"
                style={{ height: "100%" }}
                on={{
                  click: () => {
                    this.$store.commit("createPage", {
                      that,
                      pageName: this.newPageName,
                    });
                  },
                }}
              >
                新 建
              </el-button>
            </el-input>
            <el-button
              type="warning"
              on={{
                click: () => {
                  this.pageDialog = false;
                },
              }}
            >
              关 闭
            </el-button>
          </span>
        </el-dialog>
      </div>
    );
  },
};
</script>
<style lang="scss">
* {
  // outline: 1px red solid !important;
}

//用户开发环境样式
.produce {
  margin-bottom: 5px;
  div[data-type="fixedBox"]:hover,
  div[data-type="freeBox"]:hover,
  div[data-type="colBoxItem"]:hover,
  div[data-type="seniorBoxItem"]:hover {
    outline: 1.5px #0084ff dashed !important;
  }
}

//更改的样式
.app {
  .el-submenu__title {
    font-size: inherit;
  }
}

//
.menu {
  position: fixed;
  z-index: 999;
  width: 70px;
  top: 40%;
  transform: translateY(-50%);
  > button {
    margin: 5px;
  }
  .ant-btn {
    font-size: 16px;
    font-weight: 600;
    color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
    background: rgb(255, 255, 255);
  }
  .ant-btn:hover {
    color: rgb(255, 255, 255);
    background: rgb(64, 158, 255);
  }
}

.float {
  position: fixed;
  top: 5vh;
  right: 0;
  border: #ccc 1px solid;
  height: 80vh;
  overflow: auto;
  padding: 10px;
  z-index: 99;
  background-color: #fff;
  width: 330px;
}

.component {
  background-color: #fff;
  .componentList {
    display: flex;
    justify-content: space-between;
    .box {
      width: 80px;
      margin: 8px;
      text-align: center;
      color: #555;
      font-size: 15px;
    }
  }
}

//组件样式
.text {
  text-align: center;
}

//遮蔽层
.colorDom {
  position: absolute;
  z-index: 999;
  opacity: 0.35;
  pointer-events: none;
  background: rgb(255, 251, 0);
  border-color: orange;
  border-style: solid;
  > div {
    border-style: solid;
    border-color: rgb(21, 255, 0);
    background: repeating-linear-gradient(
      30deg,
      #0084ff,
      #0084ff 10px,
      #2093ff 0,
      #2093ff 20px
    );
  }
}

// .redLine {
//   outline: 1px red solid !important;
//   background: repeating-linear-gradient(
//     30deg,
//     #8c00ff3a,
//     #8c00ff3a 10px,
//     #6800bd41 0,
//     #6800bd41 20px
//   ) !important;
// }

.boxLine {
  outline: 2px #0084ff dashed !important;
}

.webPage {
  .webPageList {
    display: flex;
    overflow-y: auto;
    width: 100%;
    flex-wrap: wrap;
    height: 40vh;
    justify-content: space-around;
  }
  .el-input {
    width: 40vw;
    .el-input__inner {
      border: 1px solid #0084ff;
    }
  }
}

.colBoxWidth {
  margin: 10px;
  > div {
    margin: 10px;
    display: flex;
    justify-content: space-around;
  }
}

.seniorBoxList {
  display: flex;
  flex-wrap: wrap;
  > div {
    margin: 5px;
    width: 110px;
    height: 74px;
    display: flex;
    justify-content: space-around;
  }
  > div:hover {
    outline: 2px dotted #0084ff;
    background: #0084ff75;
  }
  div {
    border-radius: 5px;
  }
  .seniorBoxItem0 {
    background-color: #3ec1d3;
  }
  .seniorBoxItem1 {
    background-color: #ff9a00;
  }
  .seniorBoxItem2 {
    background-color: #ff165d;
  }
  .seniorBoxItem3 {
    background-color: #94da12;
  }
  .seniorBoxItem4 {
    background-color: #0070d8;
  }
}
</style>
